<!--进货单管理-->
<template>
    <div>
        <p></p>
        <transition name="fade">
            <div @touchend='end' @touchstart='start' @touchmove='move' class="swiper">
                <div @click="chooseItem(item,index)" v-for="(item, index) in imgs" :style="config[index]" :key="index" :class="{'choose':currentIndex === index}">
<!--                    <span>{{config[index]}}</span>-->
<!--                    <img :src="item.url" style="width: 100%;height: 100%;object-fit: cover">-->
    <span>{{item}}</span>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        props:['imgs'],
        data() {
            return {
                currentIndex: 3, //当前中间imgs数组中index
                deviceInfo: '', // 当前中间信息
                startX: '',
                endX: '',
                config: [
                    {
                        id: '-A',
                        position: 'absolute',
                        width: '23%',
                        top: '15%',
                        left: '-34.5%',
                        height: '70%',
                        opacity: 0,
                        zIndex: 0,
                        transition: '.4s'
                    },
                    {
                        id: 'A',
                        position: 'absolute',
                        width: '23%',
                        top: '10%',
                        left: '-11.5%',
                        height: '80%',
                        opacity: 0.2,
                        zIndex: 1,
                        transition: '.4s'
                    },
                    {
                        id: 'B',
                        position: 'absolute',
                        width: '23%',
                        top: '5%',
                        left: '13.5%',
                        height: '90%',
                        opacity: 0.6,
                        zIndex: 2,
                        transition: '.4s'
                    },
                    {
                        id: 'center',
                        position: 'absolute',
                        width: '23%',
                        top: '0',
                        left: '50%',
                        marginLeft: '-11.5%',
                        height: '100%',
                        opacity: 1,
                        zIndex: 4,
                        transition: '.4s'
                    },
                    {
                        id: 'D',
                        position: 'absolute',
                        width: '23%',
                        top: '5%',
                        left: '63.5%',
                        height: '90%',
                        opacity: 0.6,
                        zIndex: 2,
                        transition: '.4s'
                    },
                    {
                        id: 'E',
                        position: 'absolute',
                        width: '23%',
                        top: '10%',
                        left: '88.5%',
                        height: '80%',
                        opacity: 0.2,
                        zIndex: 1,
                        transition: '.4s'
                    },
                    {
                        id: 'E+',
                        position: 'absolute',
                        width: '24%',
                        top: '15%',
                        left: '111%',
                        height: '70%',
                        opacity: 0,
                        zIndex: 0,
                        transition: '.4s'
                    }
                ]
            };
        },
        methods: {
            // 滑动上一个
            prev() {
                this.config.push(this.config.shift());
                this.currentIndex = this.currentIndex - 1;
                console.log('prev config',this.config);
                if (this.currentIndex < 0) {
                    this.currentIndex = this.imgs.length - 1;
                }
                console.log('prev currentIndex', this.currentIndex);
                this.centerCard();
                this.centerIndex('prev');
            },

            // 滑动下一个
            next() {
                this.config.unshift(this.config.pop());
                this.currentIndex = this.currentIndex + 1;
                console.log('next config',this.config);
                if (this.currentIndex > this.imgs.length - 1) {
                    this.currentIndex = 0;
                }
                console.log('next currentIndex', this.currentIndex);
                this.centerCard();
                this.centerIndex('next');
            },

            // 开始移动端滑动屏幕
            start(event) {
                this.startX = event.changedTouches[0].clientX;
                this.startY = event.changedTouches[0].clientY;
            },

            end(){},

            // 连续滑动
            move(event) {
                this.endY = event.changedTouches[0].clientY;
                this.endX = event.changedTouches[0].clientX;
                this.stopDefault(event);
                this.interval = this.endX - this.startX;
                if (this.interval > 40) {
                    this.startX = this.endX;
                    this.prev();
                }
                if (this.interval < -40) {
                    this.startX = this.endX;
                    this.next();
                }
            },
            // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
            stopDefault(event) {
                let differenceY = this.endY - this.startY;
                let differenceX = this.endX - this.startX;
                if (Math.abs(differenceX) > Math.abs(differenceY)) {
                    event.preventDefault();
                }
            },
            // 当前imgs在位置上的index（并非img数组的index）
            centerIndex(val) {
                if (val == 'prev') {
                    for (let val of this.imgs) {
                        console.log('centerIndex val',val);
                        if (val.index == this.imgs.length - 1) {
                            val.index = 0;
                        } else {
                            val.index = val.index + 1;
                        }
                    }
                } else {
                    for (let val of this.imgs) {
                        console.log('centerIndex val',val);
                        if (val.index == 0) {
                            val.index = this.imgs.length - 1;
                        } else {
                            val.index = val.index - 1;
                        }
                    }
                }
                console.log('咖啡杯不断加加加加到厌倦',this.imgs)
            },
            // 点击
            chooseItem(item) {
                let cycles = item.index;
                if (item.index < 3) {
                    console.log('选中<3',item);
                    for (let i = 0; i < 3 - cycles; i++) {
                        // console.log(item.index);
                        this.prev();
                    }
                } else if (item.index > 3) {
                    console.log('选中>3',item);
                    for (let i = -1; i < item.index - 3; i++) {
                        this.next();
                    }
                } else if (item.index == 3) {
                    console.log('选中==3',item);
                    this.$emit('listenToChoose', item);
                }
            },
            // 计算中间卡片信息
            centerCard() {
                this.deviceInfo = this.imgs[this.currentIndex];
                console.log('卡片信息',this.deviceInfo);
                this.$emit('deviceInfo', this.deviceInfo);
            },

            addCardStyle() {
                if (this.imgs.length > 7) {
                    let addtime = this.imgs.length - 7;
                    for (let i = 0; i < addtime; i++) {
                        this.config.push({
                            id: 'center',
                            position: 'absolute',
                            width: '45%',
                            height: '100%',
                            top: '0px',
                            left: '50%',
                            marginLeft: '-22.5%',
                            opacity: 0,
                            transition: '.1s',
                            background: 'black'
                        });
                    }
                    console.log('addCardStyle config',this.config);
                }
            },
            // getCountTime() {
            //     let that = this;
            //     setInterval(function () {
            //         // that.next();
            //     }, 5000);
            // },
        },
        created() {
            console.log('imgs',this.imgs);
            this.centerCard();
            this.addCardStyle();// 加入样式位置的index
            if (this.imgs.length>7){
                // this.getCountTime()
            }
        }
    };
</script>

<style scoped>
    .swiper {
        width: 100%;
        height: 100px;
        position: relative;
        overflow: hidden;
    }

    .swiper div {
        position: relative;
        opacity: 0;
        height: 100%;
        box-sizing: border-box;
        padding-top: 6px;
        cursor: pointer;
    }

    .swiper .choose::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        /*background:url("../../../../assets/img/village/choose_health.png")no-repeat center;*/
        background-size: 100% 100%;
        transition: zoomIn 1s ease ;
    }


    .swiper div img{
        border-radius: 8px;
    }

    @keyframes zoomIn {
        0%{
            opacity: 0;
        }
        50%{
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

</style>
